<%--
  Created by IntelliJ IDEA.
  User: student
  Date: 2019/9/20
  Time: 15:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basepath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
    <title>Title</title>
    <base href="<%=basepath %>"/>
    <link rel="stylesheet" href="static/layui/css/layui.css">
    <style>

        * {
            padding: 0;
            margin: 0;
        }
        body {
            padding: 10px;
            margin-right: 10px;
        }
        h1 {
            text-align: center;
        }
    </style>
</head>
<body>
    <a class="layui-btn layui-btn-normal" href="user/toadd">新增用户</a>
    <h1>用户列表</h1>
    <br>
    <%--此处使用了form表单的样式，但是一定不要定义为form  否则会发送两次查询语句--%>
    <div class="layui-form layui-form-pane">
        <div class="layui-inline">
            <div class="layui-form-item" style="width: 300px;margin-bottom: 0px" pane>
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input class="layui-input" type="text" id="username" name="username" autocomplete="off" required />
                </div>
            </div>
        </div>

        <div class="layui-inline">
            <div class="layui-input-inline" style="width: 100px;">
                <button class="layui-btn" id="select">查询</button>
            </div>
        </div>
    </div>
    <table id="demo" lay-filter="test"></table>


<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script src="static/layui/layui.all.js"></script>
<script>
    layui.use(['layer','table','jquery'], function(layer,table,$){
        var table = layui.table;
        var currentPage;
        //第一个实例
        var render1 = table.render({
            elem: '#demo'
            ,height: 312
            ,url: 'user/list' //数据接口
            ,cols: [[ //表头
                {field: 'id', title: '编号', width:180}
                ,{field: 'username', title: '用户名', width:180}
                ,{field: 'password', title: '密码'}
                ,{field: 'gender', title: '性别',  sort: true}
                ,{field: 'grade.gname', title: '年级', templet: function(d){
                        return d.grade.gname
                    }}
                ,{field: 'photo', title: '照片'}
                ,{fixed: 'right', align:'center', width:178, title: '操作',toolbar: '#barDemo'}
            ]],
            parseData: function(res) { //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": res.data //解析数据列表
                };
            }
            ,page: true
            ,done: function(res, curr, count){
                //得到当前页码
                var brforeCurr = curr; // 获得当前页码
                var dataLength = res.data.length; // 获得当前页的记录数
                var count = res.count; // 获得总记录数
                if(dataLength == 0 && count != 0) { //如果当前页的记录数为0并且总记录数不为0
                    table.reload("demo", { // 刷新表格到上一页
                        page: {
                            curr: brforeCurr - 1
                        }
                    });
                    currentPage = brforeCurr - 1;
                } else {
                    currentPage = brforeCurr;
                }

            }
        });

        //监听工具条
        table.on('tool(test)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                layer.msg('ID：'+ data.id + ' 的查看操作');
            } else if(obj.event === 'del'){
                layer.confirm('真的删除这条数据吗？', function(index){
                    $.ajax({url:"user/del/"+data.id,success:function(result){
                        if(result.code == 0){
                            layer.msg("删除成功！",{
                                icon: 1,
                                time: 1000 //1秒关闭（如果不配置，默认是3秒）
                            });
                        } else {
                            layer.msg("删除失败！",{
                                icon: 2,
                                time: 1000 //1秒关闭（如果不配置，默认是3秒）
                            });
                        }
                    }});
                    layer.close(index);
                    render1.reload({page:{curr:currentPage}});
                });

            } else if(obj.event === 'edit'){
                layer.alert('编辑行：<br>'+ JSON.stringify(data.id))
            }
        });

        /*条件查询*/
        $("#select").click(function(){
            var username = $("#username").val();
            render1.reload({
                where: { //设定异步数据接口的额外参数，任意设
                    username: username
                }
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        });
    });
</script>
</body>
</html>
